<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Form Style 10</title>
    <style type="text/css">
        body {
            background-image: url("../static/css/transit_form.jpg");
            background-size: cover;
        }

        .form-wrapper {
            width: 490px;
            padding: 8px;
            margin: 50px auto;
            overflow: hidden;
            border-width: 1px;
            border-style: solid;
            border-color: #dedede #bababa #aaa #bababa;
            box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
            border-radius: 10px;
            background-color: #f6f6f6;
            background-image: linear-gradient(top, #f6f6f6, #eae8e8);
        }

        .form-wrapper #search {
            width: 330px;
            height: 21px;
            padding: 10px 5px;
            float: left;
            font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
            border: 1px solid #ccc;
            box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
            border-radius: 3px;
        }

        .form-wrapper #search:focus {
            outline: 0;
            border-color: #aaa;
            box-shadow: 0 1px 1px #bbb inset;
        }

        .form-wrapper #search::-webkit-input-placeholder {
            color: #999;
            font-weight: normal;
        }

        .form-wrapper #search:-moz-placeholder {
            color: #999;
            font-weight: normal;
        }

        .form-wrapper #search:-ms-input-placeholder {
            color: #999;
            font-weight: normal;
        }

        .form-wrapper #submit {
            float: right;
            border: 1px solid #00748f;
            height: 42px;
            width: 100px;
            padding: 0;
            cursor: pointer;
            font: bold 15px Arial, Helvetica;
            color: #fafafa;
            text-transform: uppercase;
            background-color: #7ec0ee;
            background-image: linear-gradient(top, #31b2c3, #0483a0);
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        }

        .form-wrapper #submit:hover,
        .form-wrapper #submit:focus {
            background-color: #31b2c3;
            background-image: linear-gradient(top, #0483a0, #31b2c3);
        }

        .form-wrapper #submit:active {
            outline: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        }

        .form-wrapper #submit::-moz-focus-inner {
            border: 0;
        }

        .form-style-10 {
            max-width: 450px;
            padding: 30px;
            margin: 40px auto;
            background: #FFF;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
            -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
            -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
        }

        .form-style-10 .inner-wrap {
            padding: 30px;
            background: #7ec0ee;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .form-style-10 h1 {
            background: #7ec0ee;
            padding: 20px 30px 15px 30px;
            margin: -30px -30px 30px -30px;
            border-radius: 10px 10px 0 0;
            -webkit-border-radius: 10px 10px 0 0;
            -moz-border-radius: 10px 10px 0 0;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
            font: normal 30px 'Bitter', serif;
            -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            border: 1px solid #257C9E;
        }

        .form-style-10 h1 > span {
            display: block;
            margin-top: 2px;
            font: 13px Arial, Helvetica, sans-serif;
        }

        .form-style-10 label {
            display: block;
            font: bold 15px Arial, Helvetica;
            color: #fff;
            margin-bottom: 15px;
        }

        .form-style-10 input[type="text"],
        .form-style-10 input[type="date"],
        .form-style-10 input[type="datetime"],
        .form-style-10 input[type="email"],
        .form-style-10 input[type="number"],
        .form-style-10 input[type="search"],
        .form-style-10 input[type="time"],
        .form-style-10 input[type="url"],
        .form-style-10 input[type="password"],
        .form-style-10 textarea,
        .form-style-10 select {
            display: block;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            width: 100%;
            padding: 8px;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border: 2px solid #fff;
            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
            -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
            -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
        }

        .form-style-10 .section {
            font: normal 20px 'Bitter', serif;
            color: #87cefa;
            margin-bottom: 5px;
        }

        .form-style-10 input[type="button"],
        .form-style-10 input[type="submit"] {
            background: #87cefa;
            padding: 8px 20px 8px 20px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
            font: normal 30px 'Bitter', serif;
            -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
            border: 1px solid #257C9E;
            font-size: 15px;
        }

        .form-style-10 input[type="button"]:hover,
        .form-style-10 input[type="submit"]:hover {
            background: #2A6881;
            -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
            -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
            box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
        }
    </style>
</head>

<body>
<div class="form-style-10">
    <h1>添加社区信息</h1>
    <form method="get" action="form_area" novalidate>
        <div class="section">社区信息</div>
        <div class="inner-wrap">
            <label>rentingID<input type="text" name="rentingID"/></label>
            <label>社区编号<input type="text" name="sqbh"/></label>
            <label>社区地址<input type="text" name="sqdz"/></label>
            <label>基础网络编号<input type="text" name="sqwlbh"/></label>
            <label>社区民警姓名<input type="text" name="sqmjxm"/></label>
            <label>社区民警工号<input type="text" name="sqmjgh"/></label>
        </div>
        <div class="button-section">
            <input type="submit" name="Sign Up"/>
        </div>
    </form>
</div>

</body>
</html>
